<template>
    <div class="content">
        <el-dialog :visible.sync="addExamMain.dialogFormVisible" title="添加考试" size="tiny" :before-close="handleClose">
            <div v-loading="upLoading">
              <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="130px">
                <div>
                    <el-row :gutter="41">
                      <el-col :span="21">
                            <el-form-item label="考试名称：" prop="examName">
                                <el-input v-model="ruleForm.examName" :maxlength="12" placeholder="请输入考试名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="21">                     
                            <el-form-item label="考试日期：" prop="examDate">
                                <el-row>  
                                    <el-col :span="24">
                                        <el-date-picker :editable="false" v-model="ruleForm.examDate" type="daterange" format="yyyy-MM-dd" placeholder="选择考试日期"
                                         @change="dateChange(ruleForm.examDate)" style="width:100%" :picker-options="ruleForm.pickerOptions">
                                        </el-date-picker>
                                    </el-col>
                                </el-row>   
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
            <footer>
                <el-button @click="cancel">取消</el-button>
                <el-button @click="add('ruleForm',$event)" type="primary">确认</el-button>              
            </footer>
            </div>

        </el-dialog>
    </div>
</template>
<script>

import { insertWisdomExam, listExamDate } from 'api/wisdom';
import { mapGetters } from 'vuex';
export default {
    name: 'addClassSchool',
    props: {
        addExamMain: {
            type: Object,
            required: true
        }
    },
    computed: {
        ...mapGetters([
            'schoolId'
        ])
    },


    data() {
        var validatePass = (rule, value, callback) => {
            let a = this.disabledDateRange.some(item => {
                return Date.parse(item.sStartDate) > Date.parse(value[0]) && Date.parse(item.sEndDate) < Date.parse(value[1])
            });
            if (a) {
                callback(new Error('所选时间段内包含其它考试'));
            } else {
                callback();
            }
            
            
        };
        return {
            upLoading: false,
            ruleForm: {
                examName: '',
                examDate: null,
                pickerOptions: {
                }
            },
            disabledDateRange: [],
            loading: false,
            rules: {
                examName: [
                    { message: '请输入考试名称', required: true, trigger: 'blur' },
                    { pattern: /^[^\s]+$/, message: '请勿输入空格', trigger: 'blur, change' }
                ],
                examDate: [
                    { type: 'array', message: '请选择考试日期', required: true, trigger: 'change' },
                    { validator: validatePass, trigger: 'blur,change' }
                ]
            }
        };
    },

    created() {
        // 
        this.listExamDate().then(() => {
            this.disabledDate();
        });
    
    },
    methods: {
        disabledDate() {
            let that = this;
            this.ruleForm.pickerOptions = {
               
                disabledDate(time) {
                    if (that.disabledDateRange.length) {
                        return that.disabledDateRange.some(function(item) {
                            return time.getTime() < Date.now() - 864e5 || (time.getTime() >= Date.parse(item.sStartDate) && time.getTime() <= Date.parse(item.sEndDate));
                        });
                    } else {
                        return time.getTime() < Date.now() - 864e5;
                    }
                }
            }
        },
        listExamDate() {
            return listExamDate(this.schoolId).then(response => {              
                if (response.data.content) {
                    response.data.content.forEach(element => {
                        let obj = {
                            sStartDate: element.sStartDate,
                            sEndDate: element.sEndDate
                        };
                        this.disabledDateRange.push(obj);
                    });
                }
            });
        },
        dateChange(val) {
            this.ruleForm.examDate = val;
        },
        handleClose() {
            this.$refs.ruleForm.resetFields();
            this.addExamMain.dialogFormVisible = false;
        },
        cancel() {
            this.$refs.ruleForm.resetFields();
            this.addExamMain.dialogFormVisible = false;
        },
        add(ruleForm, event) {
            this.$refs[ruleForm].validate(valid => {
                if (valid) {
                    this.upLoading = true;
                    let sStartDate = Date.parse(this.ruleForm.examDate[0]);
                    let sEndDate = Date.parse(this.ruleForm.examDate[1]) + 864e5 - 1000;
                    insertWisdomExam(
                        this.schoolId,
                        this.ruleForm.examName,
                        sStartDate,
                        sEndDate
                    ).then(data => {
                        this.upLoading = false;
                        // 给父组件传值
                        this.$message({
                            message: '添加成功！',
                            type: 'success'
                        });
                        this.$emit('addExamState', true);
                        // this.$store.dispatch('UpdateCache', true);
                        this.addExamMain.dialogFormVisible = false;
                    }).catch(Error => {
                        // this.$message(Error);
                        this.upLoading = false;
                    })
                }
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.title {
  display: block;
  text-align: left;
  margin-left: 20px;
  font-size: 14px;
  color: #333;
  padding-bottom: 10px;
  position: relative;
  &::after{
    position: absolute;
    width: 4px;
    height: 14px;
    background: #ff5e2c;
    left: -15px;
    top: 9px;
    content: ""
  }
}

footer {
  text-align: center;
}
</style>
